const CateTabItem = ({ item, onClick })=> {
    const {normal, hover, caption, checked, cateId} = item;
    const handleClick = () => {
        if(typeof onClick == 'function'){
            onClick(cateId);
        }
    };
    return (
        <li key={cateId} onClick={handleClick}>
            <div className="cate-item-img">
                <img src={checked ? hover : normal}/>
            </div>
            <div className="cate-item-caption">
                <span>{caption}</span>
            </div>
        </li>
    );
};

class ShopCategory extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            checkedTopCate: 1,
            checkedSecondCate: []
        };
        this.topCateTabItemClick = this.topCateTabItemClick.bind(this);
        this.secondCateItemClick = this.secondCateItemClick.bind(this);
    }
    topCateTabItemClick(cateId){
        this.setState({
            checkedTopCate: cateId
        });
    }
    secondCateItemClick(cateId){
        let { checkedSecondCate, checkedTopCate } = this.state;

        let _checkedSecondIndex = _.findIndex(checkedSecondCate, {parent_id: checkedTopCate});
        if(_checkedSecondIndex > -1){
            _.set(checkedSecondCate, _checkedSecondIndex + '.cate_id', cateId);
        }else{
            checkedSecondCate.push({parent_id: checkedTopCate, cate_id: cateId});
        }

        this.setState({
            checkedSecondCate: checkedSecondCate
        });
    }
    thirdCateItemClick(cateId, cateName){
        this.back2EditShop();
        $('#selectCategoryName').text(cateName);
        $('#category_id').val(cateId);
    }
    back2EditShop() {
        $('#shopCategory').hide();
        $('body').removeClass('scroll-hidden');
        $('html').removeClass('scroll-hidden');
    }

    render(){
        let { checkedSecondCate, checkedTopCate } = this.state;
        const cateList = cateItems.map(val => {
            val.checked = this.state.checkedTopCate == val.cateId;
            return <CateTabItem item={val} onClick={this.topCateTabItemClick}/>
        });
        let secondCateItems = _.result(_.find(cateItems, {cateId: this.state.checkedTopCate}), 'children');
        let _checkedSecond = _.result(_.find(checkedSecondCate, {parent_id: checkedTopCate}), 'cate_id');
        if(typeof _checkedSecond == 'undefined' && secondCateItems.length > 0){
            _checkedSecond = secondCateItems[0].cateId;
        }
        let _checkedFirstIndex = _.findIndex(cateItems, {cateId: checkedTopCate});
        secondCateItems = secondCateItems ? secondCateItems : [];
        const cateSecondList = secondCateItems.map(val => {
            let LiClassName = '';
            let style = null;
            if(val.cateId == _checkedSecond) {
                LiClassName = 'hover';
                switch (_checkedFirstIndex){
                    case 0:
                        style = {color: 'rgb(103,188,242)'};
                        LiClassName += ' meishi';
                        break;
                    case 1:
                        style = {color: 'rgb(218,192,78)'};
                        LiClassName += ' xiuxian';
                        break;
                    case 2:
                        style = {color: 'rgb(178,133,234)'};
                        LiClassName += ' shenghuo';
                        break;
                    case 3:
                        style = {color: 'rgb(209,234,133)'};
                        LiClassName += ' lvxing';
                        break;
                }
            }
            return <li key={val.cateId} className={LiClassName} onClick={() => {this.secondCateItemClick(val.cateId)}}><span style={style} className="cate-name"><span>{val.name}</span></span><span style={style} className="shop-num">{val.shop_number}</span></li>

        });
        let cateThirdItems = _.result(_.find(secondCateItems, {cateId: _checkedSecond}), 'children');
        cateThirdItems = cateThirdItems ? cateThirdItems : [];
        const cateThirdList = cateThirdItems.map(val => {
            return (
                <li key={val.cateId} onClick={() => this.thirdCateItemClick(val.cateId, val.name)}>
                    <div className="third-cate-icon">
                        <img src={val.icon}/>
                    </div>
                    <div className="third-cate-name">{val.name}</div>
                    <span className="third-cate-shop-num">{val.shop_number}</span>
                </li>
            );
        });
        return (
            <div className="shop-category-wrap">
                <div className="cate-tab-wrap">
                    <ul className="cate-tab">
                        {cateList}
                    </ul>
                </div>
                <div className="cate-list-wrap">
                    <div className="cate-list">
                        <ul>
                            {cateSecondList}
                        </ul>
                    </div>
                    <div className="cate-children">
                        <ul>
                            {cateThirdList}
                        </ul>
                    </div>
                </div>
                <div className="cate-bottom-button">
                    <a href="javascript:void(0);" onClick={this.back2EditShop}>返回编辑</a>
                </div>
            </div>
        );
    }
}


ReactDOM.render(
    <ShopCategory />,
    document.getElementById('shopCategory')
);